<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04 计算属性</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <h1>1.基本用法</h1>
    <h2>{{msg}}</h2>
    <h2>{{msg2}}</h2>
    <hr>
    <h1>2.对数据处理再显示</h1>
    <h2>{{msg.split(' ').reverse().join(' ')}}</h2>
    <h2>{{reverseMsg}}</h2>
    <button @click="change">修改值</button>
    <hr>

    <h1>3.计算属性 vs 方法 </h1>

    <h2>{{num1}}</h2>
    <h2>{{num2}}</h2>
    <h2>{{getNum2()}}</h2>
    <button onclick="fn()">测试</button>
    <hr>


    <h1> 4.get和set </h1>


    <h2>{{num2}}</h2>
    <button @click="change2">修改计算属性</button>

</div>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            // 普通的属性 既是数据
            return {
                msg: 'welcome to beijing',
                num1: 8,
                num2: ''
            }
        },
        computed: {
            // 计算属性
            msg2: function () { // 该函数必须有返回值，用来获取属性，称为get函数
                return '欢迎来到北京';
            },
            reverseMsg() {
                // 可以包含逻辑处理操作，同时reverseMsg依赖于msg
                // 分隔 翻转 连接
                return this.msg.split(' ').reverse().join(' ');
            },
            num2: {
                get() {
                    console.log("num2" + new Date());
                    return this.num1 - 1;
                },
                set() {
                    console.log('修改num2值');
                    this.num2 = 112;
                    this.num1 = 111;
                }
            },

        },
        methods: {
            change() {
                // this.msg='i love you';
                this.num1 = 666;
            },
            getNum2() {
                console.log(new Date());
                return this.num1 - 1;
            },
            change2() {
                this.num2 = 111;
            }
        }
    });

    function fn() {
        setInterval(function () {
            console.log(vm.num2, 'vm.num2 ');
            console.log(vm.getNum2());
        }, 1000);
    }
</script>
</body>
</html>